@import "./tailwind.css";
@import "./themes/violet";

html,
body,
#root {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.device-h5 {
    .h5-header {
        padding: 0 0.25rem;
    }

    .h5-hidden {
        display: none;
    }

    .h5-flex {
        display: flex;
    }
}

/** 水波纹样式 */
.ripple {
    transition:
        transform 0.2s var(--em-ripple-cubic-bezier, cubic-bezier(0.68, 0.01, 0.62, 0.6)),
        opacity 0.14s linear;
    will-change: transform, opacity;
}

/** 标签基础样式 */
button,
input,
div,
span,
form,
ul,
li,
ol {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

/** 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 10px;
}

/** 显示滚动条 */
.show-thumb:hover {
    ::-webkit-scrollbar-thumb {
        background-color: var(--vot-primary-color);
        border-radius: 10px;
        cursor: pointer;
    }
}

/** loading 组件动画样式 */
.steps-12 {
    animation-timing-function: steps(12);
}

.spinner:nth-child(1) {
    transform: rotate(30deg);
    opacity: 1;
}

.spinner:nth-child(2) {
    transform: rotate(60deg);
    opacity: 0.9375;
}

.spinner:nth-child(3) {
    transform: rotate(90deg);
    opacity: 0.875;
}

.spinner:nth-child(4) {
    transform: rotate(120deg);
    opacity: 0.8125;
}

.spinner:nth-child(5) {
    transform: rotate(150deg);
    opacity: 0.75;
}

.spinner:nth-child(6) {
    transform: rotate(180deg);
    opacity: 0.6875;
}

.spinner:nth-child(7) {
    transform: rotate(210deg);
    opacity: 0.625;
}

.spinner:nth-child(8) {
    transform: rotate(240deg);
    opacity: 0.5625;
}

.spinner:nth-child(9) {
    transform: rotate(270deg);
    opacity: 0.5;
}

.spinner:nth-child(10) {
    transform: rotate(300deg);
    opacity: 0.4375;
}

.spinner:nth-child(11) {
    transform: rotate(330deg);
    opacity: 0.375;
}

.spinner:nth-child(12) {
    transform: rotate(360deg);
    opacity: 0.3125;
}

.cube:nth-child(1) {
    animation-delay: -1.1s;
}

.cube:nth-child(2) {
    animation-delay: -0.9s;
}

.cube:nth-child(3) {
    animation-delay: -0.7s;
}

.cube:nth-child(4) {
    animation-delay: -0.5s;
}

.wave:nth-child(1) {
    animation-delay: -0.4s;
}

.wave:nth-child(2) {
    animation-delay: -0.3s;
}

.wave:nth-child(3) {
    animation-delay: -0.2s;
}

.wave:nth-child(4) {
    animation-delay: -0.1s;
}

.circle:nth-child(1) {
    animation-delay: -0.4s;
}

.circle:nth-child(2) {
    animation-delay: -0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0;
}

/** 动画播放 */
.animate-running {
    animation-play-state: running;
}

/** 动画暂停 */
.animate-paused {
    animation-play-state: paused;
}

/** 文字两端对齐 */
.text-last-justify {
    text-align-last: justify;
}

/** 清除输入框回填时的白色填充色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    // transition-delay: 99999s;
    transition:
        color 99999s ease-out 99999s,
        background-color 99999s ease-out 99999s;
}

/* 隐藏输入框上下箭头 */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

/* 隐藏输入框上下箭头：兼容Firefox */
input[type="number"] {
    appearance: textfield;
}

/** 去掉img标签src为空加载时的白色边框 */
img[src=""],
img:not([src]) {
    opacity: 0;
}

/** 清除移动端点击元素的蓝色背景 */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
